<template>
  <view class="page">
    <view class="special-zone-type-list">
      <u-tabs
        :list="specialZoneList"
        lineColor="#00C02F"
        lineWidth="64rpx"
        inactiveStyle="color: #313131;font-size: 36rpx;"
        activeStyle="color: #00C02F;font-size: 36rpx;"
        :current="specialZoneCurrent"
        @change="specialZoneChange"
        :scrollable="false"
      >
      </u-tabs>
    </view>
    <u-swiper :list="bannerList" bgColor="#fff" height="416rpx" keyName="imageUrl"></u-swiper>
    <view class="type-list">
      <u-tabs
        :list="typeList"
        lineColor="#00C02F"
        lineWidth="64rpx"
        inactiveStyle="color: #313131;"
        activeStyle="color: #00C02F;"
        keyName="cateName"
        :current="tabsCurrent"
        @change="tabsChange"
        :scrollable="typeList.length > 3"
      >
      </u-tabs>
    </view>
    <view class="goods-list" v-if="goodsList.length">
      <view class="goods-item" v-for="item in goodsList" :key="item.id" @click="jumpTo('/pages/goodsDetail/goodsDetail?id='+item.id)">
        <image style="width: 180rpx;height: 180rpx;flex-shrink: 0;" :src="item.subtitle?item.subtitle.split(',')[0]:''" mode="aspectFill" />
        <view class="u-flex-1 u-flex u-flex-column u-col-top u-row-between">
          <view class="name u-line-2">{{ item.title }}</view>
          <view class=" u-flex u-row-between" style="width: 100%;">
            <view class="price"><text>¥</text> {{ (item.priceCents/100).toFixed(2) }}</view>
            <view class="num">仅剩{{ item.totalInventory }}件</view>
          </view>
        </view>
      </view>
    </view>
    <a-empty v-else></a-empty>
    <customTabbar value="2" />
  </view>
</template>

<script>
import customTabbar from '../../components/customTabbar.vue'
import { getBannersList, getCategoriesList, getProductsList } from '@/api/index'
import { utilWxLogin } from "@/common/util";

export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      bannerList: [],
      specialZoneCurrent: 0,
      specialZoneList: [
        {
          name: '免费专区',
        },
        {
          name: '精品专区',
        },
      ],
      tabsCurrent: 0,
      typeList: [],
      goodsNum: 1,
      goodsList: [],
      pages: 0,
    };
  },
  async onLoad() {
    await utilWxLogin()
    uni.showLoading({ mask: true })
    await this.getBanner()
    await this.getCategories()
    uni.hideLoading()
  },
  methods: {
    // 轮播图
    async getBanner() {
      await getBannersList({pageSize: 1, type: this.specialZoneCurrent + 1,status: '1', deptId: uni.getStorageSync('userInfo').deptId}).then(res => {
        this.bannerList = res.rows
      })
    },
    // 商品分类
    async getCategories() {
      await getCategoriesList({pageSize: 50, categoryType: this.specialZoneCurrent}).then(async res => {
        this.typeList = [{ cateName: '全部', id: '' }, ...res.rows]
        this.typeList.forEach(v => {
          v.cateName = '🍉 ' + v.cateName
        })
        // 重置分类下标
        this.tabsCurrent = 0
        // 重置商品分页
        this.goodsNum = 1
        this.goodsList = []
        await this.getProducts()
      })
    },
    async specialZoneChange(e) {
      // 大分类下标
      this.specialZoneCurrent = e.index
      this.getBanner()
      // 查询商品分类
      await this.getCategories()
    },
    tabsChange(e) {
      // 分类下标
      this.tabsCurrent = e.index
      // 重置商品分页
      this.goodsNum = 1
      this.goodsList = []
      // 查询商品
      this.getProducts()
    },
    // 商品列表
    async getProducts() {
      uni.showLoading({ mask: true })
      await getProductsList({pageNum: this.goodsNum, pageSize: 20, status: 1, categoryId: this.typeList[this.tabsCurrent].id, productType: this.specialZoneCurrent}).then(res => {
        uni.hideLoading()
        this.goodsList = [...this.goodsList, ...res.rows]
        this.pages = Math.ceil(res.total / 20)
      })
    },
  },
  onReachBottom() {
    if(this.goodsNum < this.pages) {
      this.goodsNum++
      this.getProducts()
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
	width: 750rpx;
	min-height: 100vh;
  background: #F5F5F5;
  position: relative;
  .special-zone-type-list {
    width: 100%;
    padding: 20rpx 0;
    background-color: #fff;
  }
  .type-list {
    width: 100%;
    height: 90rpx;
    background: #FFFFFF;
    margin: 0 auto 20rpx;
  }
  .goods-list {
    width: 704rpx;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    margin: 0 auto;
    .goods-item {
      width: 100%;
      height: 180rpx;
      background: #fff;
      border-radius: 12rpx;
      display: flex;
      gap: 20rpx;
      padding: 0 28rpx 16rpx 0;
      .name {
        height: 88rpx;
        padding-top: 14rpx;
        font-size: 28rpx;
        color: #000000;
        line-height: 44rpx;
      }
      .price {
        font-weight: 500;
        font-size: 28rpx;
        color: #E20300;
        text {
          font-size: 24rpx;
        }
      }
      .num {
        font-size: 24rpx;
        color: #818181;
      }
    }
  }
}
</style>